<template>
  <div>
    <el-container>
      <el-header>
        <!-- title -->
        <div class="title">
          <span>校园招聘</span>
        </div>
        <!-- 导航条 -->
        <el-menu
          :default-active="activeIndex"
          class="el-head-menu"
          mode="horizontal"
          @select="handleSelect"
          background-color="#409EFF"
          text-color="white"
          active-text-color="#ffd04b"
        >
          <el-menu-item index="1">首页</el-menu-item>
          <el-menu-item index="2">校园宣讲</el-menu-item>
          <el-menu-item index="3">公司查找</el-menu-item>
          <el-menu-item index="4">求职经验</el-menu-item>
          <el-menu-item index="5">职位推荐</el-menu-item>
        </el-menu>
        <div>
          <el-image
            style="width: 60px; height: 60px; border-radius: 50%"
            :src="imageUrl"
          >
          </el-image>
        </div>
        <!-- 个人中心 -->
        <div class="el-header-personal">
          <el-select
            v-model="value"
            placeholder="个人中心"
            @change="selectValue"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </el-header>
      <el-main>
        <!-- 搜索框 -->
        <div class="el-main-search">
          <el-form
            v-model="searchForm"
            ref="searchFormRef"
            :inline="true"
            label-width="120"
          >
            <el-form-item label="职位检索" label-width="120">
              <el-input
                v-model="searchForm.searchParams"
                placeholder="输入职位名称试试"
                type="text"
                style="width: 200px"
                @blur="blurEvent"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="medium"
                @click="search"
                >搜索</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div></div>
        <!-- 展示区 -->
        <div id="el-main-tabs" :class="isDisplayTrue">
          <!-- 热点资讯区 -->
          <el-card class="box-card" :class="isDisplayTrue">
            <div slot="header" class="clearfix">
              <span class="clearfix-span">热点资讯</span>
              <!-- <el-button style="float: right; padding: 3px 0" type="text">刷新</el-button> -->
            </div>
            <div v-for="item in hotData" :key="item.hotInfo" class="text">
              {{ item.hotInfo }}
            </div>
          </el-card>
          <!-- 轮播图 -->
          <el-carousel
            indicator-position="outside"
            type="card"
            height="400px"
            :class="isDisplayTrue"
          >
            <el-carousel-item v-for="item in url" :key="item">
              <el-image
                style="width: 400px; height: 400px"
                :src="item"
                :fit="fit"
              ></el-image>
            </el-carousel-item>
          </el-carousel>
          <!-- 我的介绍 -->
          <div class="my" :class="isDisplayTrue">
            <div class="my-jianjie">
              <span>{{ myIntroduction.gname }}</span>
              <el-divider direction="vertical"></el-divider>
              <span>{{ myIntroduction.gage }}</span>
              <el-divider direction="vertical"></el-divider>
              <span>{{ myIntroduction.gsex }}</span>
            </div>
            <div class="my-jianjie">
              <span>{{ myIntroduction.gbirthday }}</span>
              <el-divider direction="vertical"></el-divider>
              <span>{{ myIntroduction.gschoolname }}</span>
            </div>
            <div class="my-jianjie">
              <span>{{ myIntroduction.city }}</span>
              <el-divider direction="vertical"></el-divider>
              <span>{{ myIntroduction.education }}</span>
              <el-divider direction="vertical"></el-divider>
              <span>{{ myIntroduction.identify }}</span>
            </div>
            <el-divider></el-divider>
            <div class="point">
              <span class="span-top">简历预估</span>
              <el-divider direction="vertical"></el-divider>
              <span class="span-bottom">{{ myIntroduction.score }}分</span>
              <el-divider></el-divider>
              <el-card class="resume-card">
                <div slot="header" class="clearfix">
                  <span class="resume-card-span">温馨提示</span>
                  <el-button
                    style="float: right; padding: 3px 0"
                    @click="editResume"
                    type="text"
                    >编辑简历</el-button
                  >
                </div>
                <div class="list-item">
                  {{ tips }}
                </div>
              </el-card>
            </div>
          </div>
        </div>
        <!-- 职位搜索 -->
        <div id="el-main-position" :class="isDisplayFalse">
          <div style="display: flex; flex-wrap: wrap; overflow: auto">
            <!-- 卡片 -->
            <el-card
              class="search-card"
              v-for="item in positionList"
              :key="item.pid"
            >
              <div slot="header" class="clearfix">
                <span class="card-desc-title">{{ item.name }}</span>
                <el-button
                  style="float: right; padding: 3px 0"
                  type="text"
                  @click="delivery(item.pid, item.hid, item.name)"
                  >投递</el-button
                >
              </div>
              <div class="text desc-card">
                <span>公司名称</span>
                <el-divider direction="vertical"></el-divider>
                <span>{{ item.company }}</span>
                <el-divider direction="vertical"></el-divider>
                <span>工作地点</span>
                <el-divider direction="vertical"></el-divider>
                <span>{{ item.paddress }}</span>
                <el-divider direction="vertical"></el-divider>
                <span>招聘人数</span>
                <el-divider direction="vertical"></el-divider>
                <span>{{ item.pnumbers }}</span>
              </div>
              <div class="text">
                <span>学历要求</span>
                <el-divider direction="vertical"></el-divider>
                <span>{{ item.peducation }}</span>
                <el-divider direction="vertical"></el-divider>
                <span style="color: green">薪资水平</span>
                <el-divider direction="vertical"></el-divider>
                <span>{{ item.psalary }}</span>
              </div>
              <div class="text">
                <span style="color: red">相关描述</span>
                <el-divider direction="vertical"></el-divider>
                <span>{{ item.pdesc }}</span>
              </div>
            </el-card>
          </div>
          <!-- 分页 -->
          <el-pagination
            style="margin-top: 12.2px"
            background
            layout="prev, pager, next"
            :page-size="pageInfo.pageSize"
            :page-count="11"
            :current-page="pageInfo.current"
            :total="total"
            @current-change="pageChange"
          >
          </el-pagination>
        </div>
      </el-main>
      <el-footer>专注于互联网校招</el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "RecommendGraduatemain",
  data() {
    return {
      activeIndex: "1",
      options: [
        {
          value: "1",
          label: "个人信息",
        },
        {
          value: "2",
          label: "我的简历",
        },
        {
          value: "3",
          label: "我的投递",
        },
        {
          value: "4",
          label: "修改密码",
        },
        {
          value: "5",
          label: "我的预约",
        },
        {
          value: "6",
          label: "退出",
        },
      ],
      value: "",
      searchForm: {
        current: 1,
        pageSize: 6,
        searchParams: "",
      },
      // 我的介绍
      myIntroduction: {
        gname: "",
        gage: "",
        gsex: "",
        gbirthday: "",
        gschoolname: "",
        education: "",
        city: "",
        identify: "",
        score: 0,
      },
      // 热点资讯
      hotData: [
        {
          hotInfo: "java常见问题",
        },
        {
          hotInfo: "人力资源那些事儿",
        },
        {
          hotInfo: "求职前必知的那些事",
        },
        {
          hotInfo: "如何写好简历",
        },
        {
          hotInfo: "前端工程师求职交流",
        },
        {
          hotInfo: "企业管理学",
        },
        {
          hotInfo: "面试那些事儿",
        },
        {
          hotInfo: "如何提升面试自信",
        },
        {
          hotInfo: "应届生面试常见问题",
        },
        {
          hotInfo: "职场小常识",
        },
      ],
      positionList: [],
      pageInfo: {
        current: 1,
        pageSize: 6,
      },
      total: 0,
      fit: "fill",
      url: [
        "https://img0.baidu.com/it/u=1565039048,2311313921&fm=253&fmt=auto&app=138&f=GIF?w=561&h=500",
        "https://img0.baidu.com/it/u=2680403263,4072482517&fm=253&fmt=auto&app=120&f=PNG?w=888&h=500",
        "https://img1.baidu.com/it/u=1224674827,2267757507&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
        "https://img1.baidu.com/it/u=3459255744,1600635305&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=665",
      ],
      // 投递参数
      delivaryObj: {
        pid: 0,
        hid: 0,
        name: "",
        gname: "",
      },
      isDisplayTrue: "DisplayDiv",
      isDisplayFalse: "noDisplayDiv",
      tipMessage: [
        "如果小可爱填写了简历的话就可以去查找你想要的职位啦,一键投递,静候佳音!!!",
        "主页上的职位推荐是针对你的一个用户推荐,可以去那边浏览你可能喜好的职位信息",
      ],
      tips: "",
      imageUrl: "",
    };
  },

  created() {
    // 弹出通知
    this.$notify({
      title: "你好",
      message: "欢迎来到校园招聘",
    });
  },

  mounted() {
    this.loadData();
    this.timeClick();
    this.loadImg();
  },

  watch: {},

  methods: {
    handleSelect(key) {
      if (key === "2") {
        this.$router.push("/graduatepreach");
      } else if (key === "3") {
        this.$router.push("/graduatecompany");
      } else if (key === "4") {
        this.$router.push("/graduateexperience");
      } else if (key === "5") {
        this.$router.push("/recommendposition");
      }
    },
    // 搜索
    search() {
      if (this.searchForm.searchParams === "") {
        this.$message({
          message: "输入框为内容",
          type: "error",
        });
        return;
      }
      this.isDisplayTrue = "noDisplayDiv";
      this.isDisplayFalse = "DisplayDiv";
      this.$axios
        .post("/position/searchPositions", this.searchForm)
        .then((res) => {
          if (res.data.result.list != null) {
            this.positionList = res.data.result.list;
            this.total = res.data.result.totalCounts;
          } else {
            return;
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message({
            message: "系统错误!!!",
            type: "error",
          });
        });
    },
    // 失去焦点事件
    blurEvent() {
      this.isDisplayTrue = "DisplayDiv";
      this.isDisplayFalse = "noDisplayDiv";
    },
    // 加载数据
    loadData() {
      this.$axios
        .post("/graduate/queryMyIntroduction")
        .then((res) => {
          if (res.data.result != null) {
            this.myIntroduction = res.data.result;
          } else {
            return;
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message({
            message: "系统错误!!!",
            type: "error",
          });
        });
    },
    // 个人中心事件
    selectValue(val) {
      if (val === "1") {
        this.$router.push("/graduateinfo");
      } else if (val === "2") {
        this.$router.push("/resume");
      } else if (val === "3") {
        this.$router.push("/graduatedelivery");
      } else if (val === "4") {
        this.$router.push("/graduateupdate");
      } else if (val === "5") {
        this.$router.push("/gradappointment");
      } else {
        window.localStorage.removeItem("token");
        this.$router.push("/login");
      }
    },
    // 编辑简历
    editResume() {
      this.$router.push("/resume");
    },
    // 投简历
    delivery(pid, hid, name) {
      this.delivaryObj.pid = pid;
      this.delivaryObj.hid = hid;
      this.delivaryObj.name = name;
      this.delivaryObj.gname = this.myIntroduction.gname;
      if (this.myIntroduction.score === 0) {
        this.$message({
          message: "简历未填写无法投递",
          type: "error",
        });
        return;
      }
      // 发送投递请求
      this.$axios
        .post("/delivery/deliveryResume", this.delivaryObj)
        .then((res) => {
          var response = res.data.desc;
          if (response === "投递失败") {
            this.$message({
              message: "投递失败",
              type: "error",
            });
            return;
          } else if (response === "已经投递") {
            this.$message({
              message: "已经透过,无需再投",
              type: "error",
            });
            return;
          } else if (response === "投递成功") {
            this.$message({
              message: "投递成功",
              type: "success",
            });
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message({
            message: "系统错误!!!",
            type: "error",
          });
        });
    },
    // 分页
    pageChange(val) {
      this.searchForm.current = val;
      this.search();
    },
    // 定时器
    timeClick() {
      var temp = 1;
      setInterval(() => {
        if (temp % 2 != 0) {
          this.tips = this.tipMessage[0];
        } else if (temp % 2 === 0) {
          this.tips = this.tipMessage[1];
        }
        temp++;
      }, 3000);
    },
    loadImg() {
      this.$axios
        .post("/graduate/loadHeadImage")
        .then((res) => {
          if (res.data.desc != "") {
            this.imageUrl = res.data.desc;
          } else {
            return;
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message({
            message: "系统错误!!!",
            type: "error",
          });
        });
    },
  },
};
</script>

<style scoped>
.el-header {
  background-color: #409eff;
  color: #333;
  height: 60px;
  display: flex;
  flex: wrap;
}

.el-footer {
  background-color: #409eff;
  color: white;
  text-align: center;
  line-height: 60px;
}

.el-main {
  position: relative;
  margin-top: 3px;
  margin-bottom: -3px;
  padding: 0px;
  background-color: whitesmoke;
  color: #333;
  text-align: center;
  height: 500px;
}

.title {
  width: 90px;
  margin-top: 15px;
  margin-bottom: 18px;
  color: white;
}

.el-head-menu {
  width: 1000px;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

.el-header-personal {
  width: 105px;
  margin-top: 10px;
  margin-left: 5px;
}

#el-main-tabs {
  display: flex;
  flex: wrap;
  position: absolute;
  top: 60px;
  width: 1350px;
  height: 435px;
}

#el-main-position {
  position: absolute;
  top: 60px;
  width: 100%;
  height: 435px;
  overflow: auto;
}

.el-main-search {
  position: absolute;
  bottom: 430px;
  left: 460px;
  text-align: center;
}

.display {
  display: flex;
  flex: wrap;
}

.noDisplayDiv {
  visibility: hidden;
}

.DisplayDiv {
  visibility: visible;
}

.text {
  font-size: 14px;
  text-align: left;
  margin-bottom: 15px;
  margin-left: 1px;
}

.clearfix-span {
  margin-left: 0px;
  margin-right: 180px;
  color: red;
}

.box-card {
  margin: 0px;
  padding: 0px;
  width: 300px;
  height: 432.48px;
}

/* 轮播图 */

.el-carousel {
  width: 750px;
  margin-left: 10px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 400px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

/* 我的介绍 */
.my {
  width: 270px;
  height: 430px;
  margin-left: 10px;
  background: white;
}

.my-jianjie {
  margin-top: 30px;
}

.my-jianjie span {
  font-size: 18px;
}

.span-bottom {
  margin-right: 30px;
}

.point {
  position: relative;
}

.resume-card {
  position: absolute;
  top: 50px;
  width: 270px;
  height: 165px;
}

.resume-card-span {
  font-size: 16px;
  margin-right: 100px;
  color: #e6a23c;
}

.list-item {
  font-size: 14px;
  font-style: italic;
  text-align: left;
  margin-left: 3px;
  color: red;
}

/* 搜索内容 */
.search-card {
  margin-left: 5px;
  padding: 0px;
  width: 435px;
  height: 210px;
  flex-shrink: 0;
}

.card-desc-title {
  color: orange;
  margin-right: 200px;
}

.flex-card {
  display: flex;
  flex-wrap: wrap;
}
</style>
